<template>
    <div class="box">
        <el-row>
            <el-col :span="12">
                <div class="content">
                    <el-form :model="registerForm" ref="registerForm" label-width="70px" >
                        <el-form-item prop="title" label="标题" style="width: 400px">
                            <el-input v-model="registerForm.title" placeholder="标题"></el-input>
                        </el-form-item>
                        <el-form-item prop="content" label="内容" style="width: 400px">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 10}"
                                    placeholder="请输入内容"
                                    v-model="registerForm.content">
                            </el-input>
                        </el-form-item>
                        <el-form-item style="width: 400px;">
                            <el-button type="primary" @click="putNews">确定</el-button>
                            <el-button @click="cleanContent">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="content">
                    {{styleInfo}}
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {oneNews} from '../api/index'
    export default {
        name: "OneNews",
        data(){
            return{
                registerForm: {
                    title: '',
                    content: ''
                },
                styleInfo: ''
            }
        },
        methods:{
            cleanContent(){
                this.registerForm= {
                    title: '',
                    content: ''
                }
            },
            putNews(){
                let params = new URLSearchParams();
                params.append("content", this.registerForm.content);
                oneNews(params).then(res => {
                    this.styleInfo = res.tag;
                })
                //this.styleInfo = this.registerForm.title + "**" + this.registerForm.content;
            }
        }
    }
</script>

<style scoped>
    .box{
        margin-top: 30px;
        width: 100%;
        height: 100%;
        align-content: center;
    }
    .content{
        margin: 0 auto;
        width: 500px;
        height: 500px;
        padding-top: 50px;
        text-align: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
</style>